<template>
    <div>

        <el-container style="height: 550px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-collection">图书管理</i></template>
                        <el-menu-item-group>
                            <el-menu-item :class="activeMenu === 1 ? 'is-active' : ''" index="1-1"
                                          @click="changeMenu(1)">
                                图书列表
                            </el-menu-item>
                            <el-menu-item :class="activeMenu === 2 ? 'is-active' : ''" index="1-2"
                                          @click="changeMenu(2)">
                                借阅列表
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px;background-color: #66CC99">
                    <el-button v-if="activeMenu === 1" type="primary" class="addBook-button" @click="addBook">新增图书
                    </el-button>
                    <el-button v-if="activeMenu === 2" type="primary" class="addBook-button" @click="addBorrow">新增借阅
                    </el-button>
<!--                    <el-dropdown>-->
<!--                        <i class="el-icon-setting" style="margin-right: 15px"></i>-->
<!--                        <el-dropdown-menu slot="dropdown">-->
<!--                            <el-dropdown-item>查看</el-dropdown-item>-->
<!--                            <el-dropdown-item>新增</el-dropdown-item>-->
<!--                            <el-dropdown-item>删除</el-dropdown-item>-->
<!--                        </el-dropdown-menu>-->
<!--                    </el-dropdown>-->
<!--                    <span>王小虎</span>-->
                </el-header>

                <el-main>
                    <div :key="1" v-if="activeMenu === 1">
                        <div class="book-table">
                            <vxe-table :data="bookTableData">
                                <vxe-table-column type="seq" title="编号" width="60"></vxe-table-column>
                                <vxe-table-column field="bookName" title="书名"></vxe-table-column>
                                <vxe-table-column field="author" title="作者"></vxe-table-column>
                                <vxe-table-column field="bookType.typeName" title="分类"></vxe-table-column>
                                <vxe-table-column field="publishing.publishingName" title="出版社"></vxe-table-column>
                                <vxe-table-column field="price" title="价格"></vxe-table-column>
                                <vxe-table-column field="status" title="状态">
                                    <template v-slot="{row}">
                                        <span v-text="row.status === 1 ? '在架' : '借阅中'"></span>
                                    </template>
                                </vxe-table-column>
                                <vxe-table-column field="createTime" title="上架时间">
                                    <template v-slot="{row}">
                                        <span>{{$moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                                    </template>
                                </vxe-table-column>
                                <vxe-table-column field="updateTime" title="更新时间">
                                    <template v-slot="{row}">
                                        <span>{{$moment(row.updateTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                                    </template>
                                </vxe-table-column>
                                <vxe-table-column field="" title="操作">
                                    <template slot-scope="scope">
                                        <el-button @click="updateBook(scope.row)" type="text" size="small">编辑
                                        </el-button>
                                        <el-button @click="deleteBook(scope.row)" type="text" size="small">删除
                                        </el-button>
                                    </template>
                                </vxe-table-column>
                            </vxe-table>
                        </div>
                        <div class="book-page">
                            <vxe-pager
                                    @page-change="pageChange"
                                    align="left"
                                    :current-page.sync="page"
                                    :page-size.sync="size"
                                    :total="count">
                            </vxe-pager>
                        </div>
                    </div>

                    <div :key="2" v-if="activeMenu === 2">
                        <div class="book-table">
                            <vxe-table :data="borrowTableData">
                                <vxe-table-column type="seq" title="编号" width="60"></vxe-table-column>
                                <vxe-table-column field="borrower" title="借用人"></vxe-table-column>
                                <vxe-table-column field="book.bookName" title="借阅图书"></vxe-table-column>
                                <vxe-table-column field="remark" title="借阅备注"></vxe-table-column>
                                <vxe-table-column field="createTime" title="借阅时间">
                                    <template v-slot="{row}">
                                        <span>{{$moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                                    </template>
                                </vxe-table-column>
                                <vxe-table-column field="returnTime" title="归还时间">
                                    <template v-slot="{row}">
                                        <span v-if="row.returnTime === '0001-01-01T00:00:00Z'">未归还</span>
                                        <span v-else>{{$moment(row.returnTime).format('YYYY-MM-DD')}}</span>
                                    </template>
                                </vxe-table-column>
                                <vxe-table-column field="updateTime" title="更新时间">
                                    <template v-slot="{row}">
                                        <span>{{$moment(row.updateTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                                    </template>
                                </vxe-table-column>
                                <vxe-table-column field="status" title="状态">
                                    <template v-slot="{row}">
                                        <span v-text="row.status === 1 ? '已归还' : '未归还'"></span>
                                    </template>
                                </vxe-table-column>
                                <vxe-table-column field="" title="操作">
                                    <template slot-scope="scope">
                                        <el-button @click="updateBorrow(scope.row)" type="text" size="small">编辑
                                        </el-button>
                                        <el-button @click="deleteBorrow(scope.row)" type="text" size="small">删除
                                        </el-button>
                                        <el-button @click="oneKeyReturn(scope.row)" type="text" size="small">归还
                                        </el-button>
                                    </template>
                                </vxe-table-column>
                            </vxe-table>
                        </div>
                        <div class="book-page">
                            <vxe-pager
                                    @page-change="pageChange"
                                    align="left"
                                    :current-page.sync="bpage"
                                    :page-size.sync="bsize"
                                    :total="bcount">
                            </vxe-pager>
                        </div>
                    </div>

                </el-main>
            </el-container>
        </el-container>

        <el-dialog :title="dialogTitle" :visible.sync="dialogShow" width="450px">
            <el-form :model="form">
                <el-form-item label="图书名称" label-width="70px">
                    <el-input v-model="form.bookName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图书作者" label-width="70px">
                    <el-input v-model="form.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图书分类" label-width="70px">
                    <el-select v-model="form.typeId" placeholder="请选择图书分类">
                        <el-option v-for="(item, index) in bookTypeList" :label="item.typeName"
                                   :value="item.typeId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出版社" label-width="70px">
                    <el-select v-model="form.publishingId" placeholder="请选择出版社">
                        <el-option v-for="(item, index) in publishingList" :label="item.publishingName"
                                   :value="item.publishingId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="零售价" label-width="70px">
                    <el-input-number v-model="form.price" :precision="2" :step="1" :max="999"></el-input-number>
                </el-form-item>
                <el-form-item label="状态" label-width="70px">
                    <el-switch :active-value="1" :inactive-value="0" v-model="form.status"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="dialogShow = false">取 消</el-button>
                <el-button type="primary" @click="bookSubmit" v-text="dialogStatus === 1 ? '更 新' : '新 增'"></el-button>
            </div>
        </el-dialog>

        <el-dialog :title="bdialogTitle" :visible.sync="bdialogShow" width="450px">
            <el-form :model="bform">
                <el-form-item label="借阅人" label-width="70px">
                    <el-input v-model="bform.borrower" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="借阅图书" label-width="70px">
                    <el-select v-model="bform.bookId" filterable placeholder="请选择借阅图书">
                        <el-option v-for="(item, index) in usableBookList" :label="item.bookName"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="借阅备注" label-width="70px">
                    <el-input v-model="bform.remark" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="状态" label-width="70px">
                    <el-switch :active-value="1" :inactive-value="0" v-model="bform.status"></el-switch>
                </el-form-item>

                <el-form-item v-if="bform.status === 1" label="归还日期" label-width="70px">
                    <el-date-picker v-model="bform.returnTime" type="date" placeholder="选择归还日期"
                                    value-format="yyyy-MM-dd" :picker-options="pickerOptions">>
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="bdialogShow = false">取 消</el-button>
                <el-button type="primary" @click="borrowSubmit"
                           v-text="bdialogStatus === 1 ? '更 新' : '新 增'"></el-button>
            </div>
        </el-dialog>
    </div>

</template>

<style scoped>
    .book-table {

    }

    .book-page {
        float: right;
    }

    .addBook-button {
        float: left;
        margin-top: 10px;
        margin-left: -10px;
    }

    .el-input /deep/ .el-input__inner {
        width: 300px;
    }

</style>

<script>
  export default {
    data () {
      return {
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        usableBookList: [],
        bookTableData: [],
        borrowTableData: [],
        page: 1,
        size: 5,
        bpage: 1,
        bsize: 5,
        bcount: 0,
        count: 0,
        dialogShow: false,
        form: {},
        bform: {},
        bookTypeList: [],
        publishingList: [],
        dialogTitle: null,
        dialogStatus: null,
        activeMenu: 1,
        bdialogShow: false,
        bdialogTitle: null,
        bdialogStatus: null
      }
    },
    created () {
      this.getBookList(this.page, this.size)
      this.getBorrowList(this.bpage, this.bsize)
    },
    mounted () {
    },
    methods: {
      getBookList (page, size) {
        this.$axios.get(this.base + '/bookList?' + 'page=' + page + '&size=' + size).then((res) => {
          this.bookTableData = res.data.data.data
          this.count = res.data.data.count
        })
      },
      pageChange (e) {
        this.getBookList(this.page, this.size)
      },
      changeMenu (e) {
        this.activeMenu = e
      },
      updateBook (e) {
        e = JSON.parse(JSON.stringify(e))
        this.form = {}
        this.dialogTitle = '编辑图书'
        this.dialogStatus = 1
        this.getBookTypeList()
        this.getPublishingList()
        this.form = e
        this.dialogShow = true
      },
      addBook () {
        this.form = {}
        this.dialogTitle = '新增图书'
        this.dialogStatus = 2
        this.getBookTypeList()
        this.getPublishingList()
        this.dialogShow = true
      },
      deleteBook (e) {
        let id = e.id
        this.$confirm('确认要删除吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.base + '/deleteBook?id=' + id).then((res) => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getBookList(this.page, this.size)
          })
        })
      },
      getBookTypeList () {
        this.$axios.get(this.base + '/bookTypeList').then((res) => {
          this.bookTypeList = res.data.data
        })
      },
      getPublishingList () {
        this.$axios.get(this.base + '/publishingList').then((res) => {
          this.publishingList = res.data.data
        })
      },
      bookSubmit () {
        if (this.dialogStatus === 1) {
          this.$axios.post(this.base + '/updateBook', this.form).then((res) => {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.dialogShow = false
            this.getBookList(this.page, this.size)
          })
        } else if (this.dialogStatus === 2) {
          this.$axios.post(this.base + '/saveBook', this.form).then((res) => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.dialogShow = false
            this.getBookList(this.page, this.size)
          })
        }
      },
      getBorrowList (page, size) {
        this.$axios.get(this.base + '/borrowList?' + 'page=' + page + '&size=' + size).then((res) => {
          this.borrowTableData = res.data.data.data
          this.bcount = res.data.data.count
        })
      },
      getUsableBookList (bookId) {
        let url = '/usableBookList'
        if (bookId) {
          url += '?id=' + bookId
        }
        this.$axios.get(this.base + url).then((res) => {
          console.log(res)
          this.usableBookList = res.data.data
        })
      },
      addBorrow () {
        this.bform = {}
        this.bdialogShow = true
        this.bdialogTitle = '新增借阅'
        this.bdialogStatus = 2
        this.getUsableBookList()
      },
      updateBorrow (e) {
        console.log(e)
        e = JSON.parse(JSON.stringify(e))
        this.bform = e
        this.bdialogShow = true
        this.bdialogTitle = '编辑借阅'
        this.bdialogStatus = 1
        this.getUsableBookList(e.bookId)
      },
      deleteBorrow (e) {
        let borrowId = e.borrowId
        console.log(borrowId)
        this.$confirm('确认要删除吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.base + '/deleteBorrow?id=' + borrowId).then((res) => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getBorrowList(this.bpage, this.bsize)
          })
        })
      },
      oneKeyReturn (e) {
        let borrowId = e.borrowId
        console.log(borrowId)
        this.$confirm('确认已归还吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.base + '/oneKeyReturn?id=' + borrowId).then((res) => {
            this.$message({
              message: '归还成功',
              type: 'success'
            })
            this.getBookList(this.page, this.size)
            this.getBorrowList(this.bpage, this.bsize)
          })
        })
      },
      borrowSubmit () {
        console.log(this.bform)
        if (this.bdialogStatus === 1) {
          this.$axios.post(this.base + '/updateBorrow', this.bform).then((res) => {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.bdialogShow = false
            this.getBookList(this.page, this.size)
            this.getBorrowList(this.bpage, this.bsize)
          })
        } else if (this.bdialogStatus === 2) {
          this.$axios.post(this.base + '/saveBorrow', this.bform).then((res) => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.bdialogShow = false
            this.getBookList(this.page, this.size)
            this.getBorrowList(this.bpage, this.bsize)
          })
        }
      }
    }
  }
</script>
